import React, { useEffect, useState } from 'react';
import Header from '../../components/Header'
import { useParams, useLocation, useNavigate } from 'react-router-dom'
import { getDetailData } from '../../api/detail'
import {LeftOutline} from 'antd-mobile-icons'
import './detail.scss'
import { Swiper, Image, Skeleton, ImageViewer  } from 'antd-mobile'

const Index = () => {



  // 获取跳转页面的函数
  const navigate = useNavigate()

  // useParams 是用来获取通过 url 传递的参数
  const params = useParams()
  console.log(params);

  // 获取通过 state 传递的参数
  const location = useLocation()
  console.log(location.state);


  // [变量名数据名, 修改变量内容的方法]
  // pro: 是我们初始状态， setPro 修改状态的方法
  const [pro, setPro] = useState()

  // 该 hooks 会在页面挂载阶段调用，也会在更新阶段调用
  // 也可以实现数据的监听
  // useEffect 有两个参数
  // 第一个参数是回调函数
  // 第二个参数是一个依赖,如果配置一个 [] 空数组，就代表无依赖(没有依赖的时候只会在组件挂载阶段执行一次)
  // 数组中的内容就是依赖项，只有在依赖项发生改变的时候才会执行回调函数
  useEffect(()=>{
    getDetailData(params.proid).then(res => {
      console.log(res);
      res.data.banners = res.data.banners[0].split(',')
      setTimeout(()=>{
        setPro(res.data)
      }, 2500)

    })
  }, [params.proid])

  const [visible,setVisible] = useState(false)

  return (
    <div className='box'>
      <Header title='详情' backBtn={(<LeftOutline onClick={()=>{
        navigate(-1)
      }} className='backBtn' />)} />


        {
          !pro ?
          (<>
            {/* 没有请求成功的时候显示骨架屏 */}
            <h1> 内容正在加载中... </h1>
            <Skeleton.Title animated />
            <Skeleton.Paragraph lineCount={5} animated />
          </>)
          :
          (<div className='content'>
          {/* 轮播图布局 */}
            {(<Swiper style={{height:350}} className='my-swiper' autoplay loop>
            {
              pro.banners.map(item => {
                return (<Swiper.Item key={item}>
                  <Image fit='cover' onClick={()=>{
                    setVisible(true)
                  }} style={{height:350}} src={item} />
                </Swiper.Item>)
              })
            }
            </Swiper>)}

            <ImageViewer.Multi
              images={pro.banners}
              visible={visible}
              onClose={() => {
                setVisible(false)
              }}
            />

            <div className='main'>
              <h2>{pro.proname}</h2>

              <p>品牌： {pro.brand}</p>
              <p>描述： {pro.desc}</p>
            </div>


          </div>)
        }



      </div>

  );
};

export default Index;
